.taskGroup {

    display        : flex;
    align-items    : center;
    justify-content: center;
    color          : #fff;
    font-size      : 12px;
    position       : relative;
    height         : 100%;
    padding        : 0 8px;

    &>* {
        z-index: 10;
    }

    &.plural i:nth-child(2) {
        width: 92%;
    }

    &.focus i {
        background: #ffffff31;
    }

    &:hover i {
        background: #ffffff49;
    }

    i {
        position  : absolute;
        top       : 0;
        left      : 0;
        height    : 100%;
        width     : 100%;
        display   : block;
        z-index   : 0;
        transition: background .2s;

        &::after {
            content   : ' ';
            display   : block;
            position  : absolute;
            top       : 0;
            left      : 0;
            width     : 100%;
            height    : 3px;
            opacity   : 0.6;
            background: var(--wf-color-primary);
        }

        &:nth-child(2) {
            width       : 100%;
            border-right: 1px solid #000;
        }
    }

    // .taskGroupSign {
    //     position: absolute;
    //     display : flex;
    //     gap     : 1px;
    //     height  : 3px;
    //     width   : 100%;
    //     top     : 0;
    //     left    : 0;

    //     // &::before {
    //     //     content   : ' ';
    //     //     display   : block;
    //     //     flex      : 1;
    //     //     background: var(--wf-color-primary);
    //     // }

    //     // &.plural::after {
    //     //     content   : ' ';
    //     //     display   : block;
    //     //     flex      : none;
    //     //     width     : 10px;
    //     //     opacity   : 0.7;
    //     //     background: var(--wf-color-primary);
    //     // }
    // }
}